<template>
  <view class="page_root" data-page-name="编辑交付日报" data-page-identification="c_b81x00ro3o">
    <!-- UNI_APP_EXEGESIS_START NAVIGATION_TEMPLATE UNI_APP_EXEGESIS_END -->
    <!-- begin vid_9hrpm9gcyt 自定义模板_2nlk3222kv -->
    <view class="body">
      <u-form :model="recordState" ref="recordForm" :rules="rules">
        <u-picker
          v-model="recordState.dateShow"
          mode="time"
          title="请选择工时提交日期"
          @confirm="onTimeConfirm"
          @cancel="onCancel"
        ></u-picker>
        <view><u-notice-bar mode="horizontal" :list="recordState.tip"></u-notice-bar></view>
        <u-form-item
          required="true"
          label-position="top"
          label="请选择工时提交日期"
          prop="dailyDate"
        >
          <u-input
            border="true"
            placeholder="请选择工时提交日期"
            type="select"
            v-model:modelValue="recordState.dailyDate"
            @click="recordState.dateShow = true"
          ></u-input>
        </u-form-item>
        <u-select
          v-model="recordState.projectCodeShow"
          mode="single-column"
          title="请选择项目名称或代号"
          :list="recordState.projectCodeList"
          @confirm="onProjectConfirm"
        ></u-select>
        <u-form-item required="true" label-position="top" label="项目名称或代号" prop="projectCode">
          <u-input
            border="true"
            placeholder="请选择项目"
            type="select"
            v-model:modelValue="recordState.projectCode"
            @click="getProject"
          ></u-input>
        </u-form-item>
        <u-select
          v-model="recordState.milepostShow"
          mode="single-column"
          title="请选择项目阶段"
          :list="recordState.milepostList"
          @confirm="onMilepostConfirm"
        ></u-select>
        <u-form-item required="true" label-position="top" label="项目阶段" prop="milepostName">
          <u-input
            border="true"
            placeholder="请选择项目阶段"
            type="select"
            v-model:modelValue="recordState.milepostName"
            @click="getMilepostList"
          ></u-input>
        </u-form-item>
        <u-select
          v-model="recordState.taskShow"
          mode="single-column"
          title="请选择任务"
          :list="recordState.taskList"
          @confirm="onTaskConfirm"
        ></u-select>
        <u-form-item required="true" label-position="top" label="任务" prop="taskName">
          <u-input
            border="true"
            placeholder="请选择任务"
            type="select"
            v-model:modelValue="recordState.taskName"
            @click="getTaskList"
          ></u-input>
        </u-form-item>
        <u-form-item required="true" label-position="top" label="工时" prop="workingHours">
          <u-input
            border="true"
            placeholder="请输入工时"
            type="number"
            v-model:modelValue="recordState.workingHours"
          ></u-input>
        </u-form-item>
        <u-form-item required="true" label-position="top" label="事项描述" prop="dailyContent">
          <u-input
            clearable="true"
            border="true"
            placeholder="请输入事项描述"
            v-model:modelValue="recordState.dailyContent"
          ></u-input>
        </u-form-item>
        <u-select
          v-model="recordState.eventStatusShow"
          mode="single-column"
          :list="recordState.eventStatusList"
          @confirm="onEventStatusConfirm"
        ></u-select>
        <u-form-item required="true" label-position="top" label="事项状态" prop="eventStatus">
          <u-input
            border="true"
            placeholder="请选择事项状态"
            type="select"
            v-model:modelValue="recordState.eventStatus"
            @click="recordState.eventStatusShow = true"
          ></u-input>
        </u-form-item>
        <u-picker
          v-model="recordState.estimatedTimeOfCompletionShow"
          mode="time"
          @confirm="onEstimatedTimeOfCompletionConfirm"
          @cancel="onCancel"
        ></u-picker>
        <u-form-item
          required="true"
          label-position="top"
          label="预计完成时间"
          prop="estimatedTimeOfCompletion"
        >
          <u-input
            border="true"
            placeholder="请选择预计完成时间"
            type="select"
            v-model:modelValue="recordState.estimatedTimeOfCompletion"
            @click="recordState.estimatedTimeOfCompletionShow = true"
          ></u-input>
        </u-form-item>
        <u-form-item required="true" label-position="top" label="是否有风险" prop="riskStatus">
          <u-radio-group v-model="recordState.riskStatus" @change="radioGroupChange">
            <u-radio
              v-for="(item, index) in recordState.riskList"
              :key="index"
              :name="item.name"
              :disabled="item.disabled"
            >
              {{ item.name }}
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item label-position="top" label="风险描述" prop="riskDescription">
          <u-input
            border="true"
            placeholder="请输入风险描述"
            v-model:modelValue="recordState.riskDescription"
          ></u-input>
        </u-form-item>
        <u-form-item label-position="top" label="解决方案" prop="solution">
          <u-input
            border="true"
            placeholder="请输入解决方案"
            v-model:modelValue="recordState.solution"
          ></u-input>
        </u-form-item>
      </u-form>
    </view>
    <!-- end vid_9hrpm9gcyt 自定义模板_2nlk3222kv -->
  </view>
</template>
  <script setup>
import {
  ref,
  reactive,
  toRaw,
  markRaw,
  watch,
  computed,
  onBeforeMount,
  onMounted,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated,
  getCurrentInstance,
} from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
import {
  isEqual,
  cloneDeep,
  isNullOrEmpty,
  isEmptyArr,
  isArray,
  isNullOrUnDef,
  localGet,
  traversalTreeStructure,
  set,
  checkCaseCondition,
  throttle,
  merge,
  switchCase,
  dateParse,
  debounce,
  isContained,
} from '@/utils/index';
import { CovertOptions, getChartsDataSourceConvert } from '@/utils/chart';
import {
  propertyFormatByNumber,
  propertyFormatByPercentage,
  propertyFormatByDate,
} from '@/utils/format';
import { FormFormat } from '@/utils/formFormat';
import { customAddWaterMarkFunc, generateWaterMarkText } from '@/utils/addWaterMark';
import dayjs from 'dayjs';
/*** UNI_APP_EXEGESIS ***
    import { handleRedirect, permission } from '@/utils/common'
    import { onPullDownRefresh, onLoad, onReady, onShow, onHide, onPageScroll } from '@dcloudio/uni-app'
    *** UNI_APP_EXEGESIS ***/

// ---------------------------- 属性定义 ----------------------------
const sourceId = 'page3000000100';

// 是否显示菜单按钮
const isMenuIconShow = false;
// NAVIGATION_MENU
const handleShowNavigation = () => {};

const setTimeOutList = [];

const vid_9hrpm9gcyt_props = reactive({
  code: '',
});

// ============================ 属性定义 ============================

// ---------------------------- 元素数据引用 ----------------------------
// 组件 自定义模板_2nlk3222kv ref 的引用
const vid_9hrpm9gcyt_ref = ref(null);
// 动态key的map
const fieldTypeMap = {};
// 动态key的map
const refMap = { vid_9hrpm9gcyt_ref };

const showState = reactive({
  vid_9hrpm9gcyt_visible: true,
});
// ============================ 元素数据引用 ============================

// ---------------------------- 数据 ----------------------------

// ============================ 数据 ============================

// ---------------------------- 方法 ----------------------------
// ---------------------------- 页面数据 ----------------------------

// ============================ 页面数据 ============================

// ---------------------------- 响应 ----------------------------

// ============================ 响应 ============================

// ---------------------------- 函数 ----------------------------

// 自定义函数 返回上一页
const customFunction_goBack_tt9by2ki2g = (...params) => {
  uni.navigateBack();
};

// ============================ 函数 ============================

// ---------------------------- 页面参数 ----------------------------

const pageParameter_state = reactive({
  processInstanceId: undefined,
});

// ============================ 页面参数 ============================

// ---------------------------- 组件事件处理方法 ----------------------------

// ============================ 组件事件处理方法 ============================

// ============================ 方法 ============================

// ---------------------------- 生命周期 ----------------------------

const pageScrollTop = ref(0);

// *** PREVIEW_EXEGESIS ***
onMounted(() => {
  setPageParams(route.query);
  // 设置表单的rule
  try {
  } catch {
    // do nothing
  }
});
// *** PREVIEW_EXEGESIS *** //

/*** UNI_APP_EXEGESIS ***
    const routeOption = ref({})
    onLoad((option) => {
      routeOption.value = option;
    });
    onReady(() => {
      setPageParams(routeOption.value)
      // 设置表单的rule
      try{
  
      }catch{
          // do nothing
      }
    });
    // 图表刷新标记
    const uChartsReshowFlag = ref(false);
    onHide(() => { // 页面隐藏后标记置为false(如果不置为false无法触发图表更新)
        uChartsReshowFlag.value = false
    })
    onShow(() => {
        uChartsReshowFlag.value = true; // 页面激活后,标记置为true
  
        setPageParams(routeOption.value)
    })
    onPageScroll(e => {
        pageScrollTop.value = e.scrollTop
    });
    *** UNI_APP_EXEGESIS ***/

const setPageParams = (routerParam) => {
  const pageParams = [{ dataType: 'STRING', dependencies: [], name: 'processInstanceId' }];
  const strategyMap = {
    STRING: (param, paramValue) => {
      pageParameter_state[param.name] = paramValue;
    },
    BOOLEAN: (param, paramValue) => {
      if ('true' === (paramValue || '').toLowerCase()) {
        pageParameter_state[param.name] = true;
      } else if ('false' === (paramValue || '').toLowerCase()) {
        pageParameter_state[param.name] = false;
      } else {
        // TODO: 是否要支持toast
        console.error('参数传入错误！类型不匹配！');
      }
    },
    NUMBER: (param, paramValue) => {
      if (!isNaN(paramValue)) {
        pageParameter_state[param.name] = Number(paramValue);
      } else {
        // TODO: 是否要支持toast
        console.error('参数传入错误！类型不匹配！');
      }
    },
    ARRAY: (param, paramValue) => {
      if (isNullOrUnDef(paramValue) || !paramValue || paramValue === 'undefined') {
        // default value
        pageParameter_state[param.name] = [];
      } else if (paramValue.trim().startsWith('[') && paramValue.trim().endsWith(']')) {
        try {
          pageParameter_state[param.name] = JSON.parse(decodeURI(paramValue));
        } catch (error) {
          console.error('参数解析失败 ', error);
        }
      } else {
        console.error('参数传入错误！类型不匹配！');
      }
    },
  };
  pageParams.forEach((param) => {
    strategyMap[param.dataType](param, routerParam[param.name]);
  });
};

onUnmounted(() => {
  // 销毁定时器
  setTimeOutList.forEach(({ repeat, timer }) => {
    repeat ? clearInterval(timer) : clearTimeout(timer);
  });
});

/*** UNI_APP_EXEGESIS ***
    onPullDownRefresh(() => {
      // 下拉刷新
      setTimeout(() => {
          uni.stopPullDownRefresh()
      }, 1000)
    })
    *** UNI_APP_EXEGESIS ***/

// ============================ 生命周期 ============================

// ---------------------------- 数据关联处理 ----------------------------
// ---------------------------- 组件数据同步 ----------------------------

// ============================ 组件数据同步 ============================
//
// ============================ 数据关联处理 ============================

// ---------------------- 不同组件自定义的处理逻辑 ---------------------

// ====================== 不同组件自定义的处理逻辑 ======================

// ================================定制化逻辑========================================
onMounted(() => {
       try {
        recordForm?.value?.setRules(rules);
      } catch {
        // do nothing
      }
    });

    const recordForm = ref(null);
    const rules = {
      dailyDate: [
        { type: 'string', required: true, message: '请选择工时提交日期', trigger: 'manual' },
      ],
      projectCode: [
        { type: 'string', required: true, message: '请选择项目名称', trigger: 'manual' },
      ],
      milepostName: [
        { type: 'string', required: true, message: '请选择项目阶段', trigger: 'manual' },
      ],
      taskName: [
        { type: 'string', required: true, message: '请选择任务', trigger: 'manual' },
      ],
      workingHours: [
        {
          required: true,
          validator: validateWorkingHours,
          trigger: 'manual',
        },
      ],
      dailyContent: [
        { type: 'string', required: true, message: '请输入事项描述', trigger: 'manual' },
      ],
      eventStatus: [
        { type: 'string', required: true, message: '请选择事项状态', trigger: 'manual'},
      ],
      estimatedTimeOfCompletion: [
        { type: 'string', required: true, message: '请选择预计完成时间', trigger: 'manual' },
      ],
      riskStatus: [
        { type: 'string', required: true, message: '请选择是否有风险', trigger: 'manual' },
      ],
    };
    function validateWorkingHours(rule, value, callback) {
      if (!/^(0(\.5)?|[1-7](\.0|\.5)?|8(\.0)?)$/.test(value)) {
        callback(new Error('请输入有效的工时(支持0.5的数字)'));
      } else {
        callback();
      }
    }
    const customStyle = reactive({
      backgroundColor: '#21B5FF',
      color: '#fff',
    });
    const recordState = reactive({
      tip:[
        '变更填报日期后将会清空已编辑的日报数据',
        '需要重新选择和编辑。'
      ],
      dateShow: false,
      projectCodeShow: false,
      // 时间
      dailyDate: undefined,
      // 项目选择列表
      projectCodeList: [],
      // 选中的项目id
      projectCode: undefined,
      // 项目阶段
      milepostShow: false,
      // 项目阶段列表
      milepostList: [],
      // 选中的项目阶段
      milepostName: undefined,
      // 选择项目阶段的id（查询任务需要）
      milepostId: null,
      taskName: undefined,
      // 工时
      workingHours: undefined,
      // 任务id（提交需要用）
      taskId: [],
      // 事项描述
      dailyContent: '',
      // 事项状态
      eventStatus: '正常推进中',
      // 事项状态列表
      eventStatusList: [
        {
          label: '正常推进中',
          value: '正常推进中',
        },
        {
          label: '推进有困难',
          value: '推进有困难',
        },
        {
          label: '已完成',
          value: '已完成',
        },
      ],
      eventStatusShow: false,
      estimatedTimeOfCompletionShow: false,
      riskList: [
        {
          name: '是',
        },
        {
          name: '否',
        },
      ],
      riskStatus: '否',
      // 风险描述
      riskDescription: '',
      // 解决方案
      solution: '',
    });
</script>
  <style lang="less" scoped>
.body {
  height: 100%;
  padding: 12px;
  border-radius: 10px;
  background-color: #fff;
}
.page_root {
  min-height: 100%;
  box-sizing: border-box;
  background-color: rgba(53, 117, 199, 1);
  padding: 0 16px 16px 16px;
}
</style>
  